require("../../assets/css/normalize.css");
require("../../assets/css/reset.css");
require("./mine_sportsdate.less");
// 引入模块
const dom = require("../../utils/dom.js");
const axios = require("../../utils/axios.js");
import * as echarts from "echarts";

document.addEventListener("DOMContentLoaded", async function () {
	// 1.返回上一页
	dom.get("#back").addEventListener("click", function () {
		history.back();
	});
	// 2.渲染数据
	let res = await axios.get("/api/exercise");
	// console.log(res);
	let { sum7Calorie, sum7Duration, sum7Meter, days } = res.data.data;
	dom.get("#sportsTime span").textContent = sum7Duration;
	dom.get("#weekUse span").textContent = sum7Calorie;
	dom.get("#distance").textContent = sum7Meter;
	dom.get("#sumDays").textContent = days.length;
	dom.get("#constantDays").textContent = days.length;
	// 3.图表1:
	// x轴的数据
	let xdate = days.map(function (v) {
		return v.date.slice(5);
	});
	// y轴的数据
	let ytimes = days.map(v => {
		return v.sumDuration;
	});
	// console.log(xdate, ytimes);
	const myChart = echarts.init(dom.get("#chart1"));
	myChart.setOption({
		//标题
		title: {
			text: "近7天运动时长",
			left: 15,
			top: 15,
		},
		// 网格布局
		grid: {
			left: 50,
			height: 100,
		},
		//x轴
		xAxis: {
			type: "category",
			data: xdate,
		},
		//y轴
		yAxis: {
			type: "value",
		},
		//数据序列
		series: [
			{
				data: ytimes,
				type: "bar",
				showBackground: true,
				backgroundStyle: {
					color: "rgba(180, 180, 180, 0.2)",
				},
			},
		],
		//颜色
		color: ["#4294ff"],
	});
	// 3.图表2:
	const myChart2 = echarts.init(dom.get("#chart2"));
	myChart2.setOption({
		//标题
		title: {
			text: "运动分类",
			left: 15,
			top: 15,
		},
		legend: {
			orient: "vertical",
			left: 25,
			top: "middle",
		},
		series: [
			{
				name: "Access From",
				type: "pie",
				radius: "70%",
				data: [
					{ value: 1048, name: "跑步" },
					{ value: 735, name: "骑行" },
					{ value: 580, name: "训练" },
				],
				label: {
					position: "inside",
					formatter: "{d}%",
					color: "#fff",
					fontSize: 16,
				},
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: "rgba(0, 0, 0, 0.5)",
					},
				},
			},
		],
	});
	// 4.图表3:
	// console.log(days);
	let xdate1 = days.map(v => {
		return v.exerciseData[0].calorie;
	});
	let xdate2 = days.map(v => v.exerciseData[1].calorie);
	let xdate3 = days.map(v => v.exerciseData[2].calorie);
	// console.log(xdate1, xdate2, xdate3);

	const myChart3 = echarts.init(dom.get("#chart3"));
	myChart3.setOption({
		//标题
		title: {
			text: "近七日运动分类",
			left: 15,
			top: 15,
		},
		tooltip: {
			trigger: "axis",
			axisPointer: {
				// Use axis to trigger tooltip
				type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
			},
		},
		legend: {
			left: "right",
			top: 35,
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "3%",
			containLabel: true,
		},
		xAxis: {
			type: "value",
		},
		yAxis: {
			type: "category",
			data: xdate,
		},
		series: [
			{
				name: "跑步",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: xdate1,
			},
			{
				name: "骑行",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: xdate2,
			},
			{
				name: "训练",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: xdate3,
			},
		],
		color: ["#58bb92", "#4294ff", "#92d050"],
	});
	// 5.图表4:折线图
	let counts = days.map(v => v.count);
	// console.log(counts);
	const myChart4 = echarts.init(dom.get("#chart4"));
	myChart4.setOption({
		//标题
		title: {
			text: "近七日训练次数",
			left: 15,
			top: 15,
		},
		xAxis: {
			type: "category",
			data: xdate,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: counts,
				type: "line",
			},
		],
	});
});
